<template>
  <view class="container">
    <!-- 顶部轮播图（带边框包裹） -->
    <view class="swiper-container">
	<view class="page-title">泉州风光</view>
      <swiper 
        class="swiper" 
        autoplay 
        interval="3000" 
        circular 
        indicator-dots
      >
        <swiper-item>
          <image src="/static/city1.png" mode="widthFix" class="swiper-img" />
        </swiper-item>
        <swiper-item>
          <image src="/static/city2.jpg" mode="widthFix" class="swiper-img" />
        </swiper-item>
        <swiper-item>
          <image src="/static/city3.jpg" mode="widthFix" class="swiper-img" />
        </swiper-item>
      </swiper>
    </view> 
	
	
	
	 <!-- 城市介绍（富文本组件） -->
	    <view class="city-intro">
	      <rich-text :nodes="cityIntro"></rich-text>
	    </view>
		
		<!-- 探索进度（带边框包裹） -->
		    <view class="progress-container">
		      <text class="progress-title">探索进度</text>
		      <view class="progress-info">
		        <text>当前进度: {{ progressValue }}%</text>
		        <view class="progress-bar">
		          <progress :percent="progressValue" show-info />
		        </view>
		      </view>
		    </view>
			
			<view class="city-picker-container">
			      <text class="picker-title">选择城市</text>
			      <picker 
			        mode="multiSelector" 
			        :range="multiArray" 
			        :range-key="'name'" 
			        v-model="multiIndex" 
			        @change="bindMultiPickerChange"
			      >
			        <view class="picker-text">
			          当前选择: {{ selectedProvince }} - {{ selectedCity }} - {{ selectedArea }}
			        </view>
			      </picker>
				  </view>
			    
				
				
				    <view class="swiper-container">
					<view class="page-title">泉州宣传</view>
				     <view>
				     	<video 
				     	        :src="videoSrc" 
				     	        poster="/static/video-poster.jpg" 
				     	        controls 
				     	        class="video"
				     	      ></video>
				     </view>
				    </view> 
					
					
					
					<view class="swiper-container">
					      <text class="preference-title">偏好设置</text>
					      <view class="preference-item">
					        <text class="item-label">出行方式：</text>
					        <radio-group v-model="transport">
					          <radio value="bus">公交</radio>
					          <radio value="self">自驾</radio>
					          <radio value="walk">步行</radio>
					        </radio-group>
					      </view>
					      <view class="preference-item">
					        <text class="item-label">显示推荐景点：</text>
					        <switch v-model="showRecommend" />
					      </view>
					      <view class="preference-item">
					        <text class="item-label">探索半径：{{ sliderValue }}km</text>
					        <slider 
					          v-model="sliderValue" 
					          min="1" 
					          max="50" 
							  @change="a"
					          activeColor="#007AFF"
					        />
					      </view>
					    </view>

					</view>
								  
</template>

<script>
export default {
  data() {
    return {
       cityIntro: `
               <h2 style="font-weight: bold; color: #333; margin: 0 0 10px 0;">泉州介绍</h2>
                       
                       <p style="margin: 0 0 10px 0; font-weight: bold;">海上丝绸之路起点 - 泉州</p>
                       
                       <p style="margin: 0 0 10px 0;">历史文化：泉州是国务院首批公布的24个历史文化名城之一，是古代"海上丝绸之路"起点，宋元时期被誉为"东方第一大港"。</p>
                       
                       <p style="margin: 0 0 10px 0;">著名景点：清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</p>
                       
                       <p style="margin: 0; ">特色文化：拥有<span style="color: #0066cc;">南音</span>、<span style="color: #0066cc;">木偶戏</span>和<span style="color: #0066cc;">闽南建筑</span>等丰富的非物质文化遗产。</p>
		
            ` // 富文本内容（含加粗、换行、颜色等格式）
			 ,progressValue: 60 ,// 探索进度值（60%）
			 
			 multiArray: [
			         [{ name: '福建省' }, { name: '其他省份...' }],
			         [{ name: '泉州市' }, { name: '其他市...' }],
			         [{ name: '丰泽区' }, { name: '其他区...' }]
			       ],
			       multiIndex: [0, 0, 0], // 三级选择器的选中索引
			       selectedProvince: '福建省',
			       selectedCity: '泉州市',
			       selectedArea: '丰泽区',
				   videoSrc: '/static/city-videos.mp4' ,// 视频资源路径
				    transport: 'bus', // 出行方式：默认公交
				    showRecommend: true, // 是否显示推荐景点：默认开启
				    sliderValue: 10 ,// 探索半径：默认10km
					isPlaying: false,
			
			
    }
  },
  methods: {
      // 三级选择器变化时，更新选中的省市区
      bindMultiPickerChange(e) {
        const index = e.detail.value;
        this.multiIndex = index;
        this.selectedProvince = this.multiArray[0][index[0]].name;
        this.selectedCity = this.multiArray[1][index[1]].name;
        this.selectedArea = this.multiArray[2][index[2]].name;
      },
	 
	  a(e){
		  this.sliderValue = e.detail.value
	  }
    }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
}
.page-title {
  font-size: 36rpx;
  font-weight: bold; /* 加粗效果 */
  color: #333;
  margin: 0 0 30rpx 10rpx; /* 底部和左侧留出间距 */
}
/* 轮播图容器：添加「文本框风格的边框」 */
.swiper-container {
  width: 100%;
  margin-bottom: 40rpx;
  border: 2rpx solid #ccc; /* 边框（颜色、粗细可自定义） */
  border-radius: 10rpx;    /* 圆角（让边框更柔和） */
  padding: 10rpx;          /* 内边距（轮播图与边框的间距） */
  box-sizing: border-box;  /* 防止padding/border撑大容器 */
  background-color: #fff;  /* 可选：添加背景色，更像输入框 */
}

/* 轮播图自身样式 */
.swiper {
  width: 100%;
  height: 300rpx;
  
}
.swiper-img {
  width: 100%;
  height: 300%;
  border-radius: 10rpx;
}

.city-intro {
  margin: 0 0 40rpx 0; /* 与上下元素保持一致间距 */
  padding: 20rpx; /* 内容与边框间距 */
  border: 2rpx solid #ccc; /* 与轮播图相同边框样式 */
  border-radius: 10rpx; /* 统一圆角 */
  background-color: #fff; /* 白色背景增强可读性 */
  line-height: 1.6;
  box-sizing: border-box;
}

/* 探索进度：带边框包裹 */
.progress-container {
  margin: 0 0 40rpx 0;
  padding: 20rpx;
  border: 2rpx solid #ccc;
  border-radius: 10rpx;
  background-color: #fff;
  box-sizing: border-box;
}

.city-picker-container {
  margin: 0 0 40rpx 0;
  padding: 20rpx;
  border: 2rpx solid #ccc;
  border-radius: 10rpx;
  background-color: #fff;
  box-sizing: border-box;
}
.picker-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
  display: block;
}
.picker-text {
  font-size: 26rpx;
  color: #666;
  padding: 10rpx 0;
}

.video-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
  display: block;
  
}
.video {
  width: 100%;
  height: 400rpx; /* 视频高度可调整 */
  margin-bottom: 40rpx;
  padding: 20rpx;
  border: 2rpx solid #ccc;
  border-radius: 10rpx;
  background-color: #fff;
  box-sizing: border-box;
}

.preference-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}
.preference-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
.item-label {
  font-size: 26rpx;
  color: #333;
  margin-right: 15rpx;
  width: 160rpx;
}
radio-group {
  display: flex;
  align-items: center;
  gap: 20rpx;
}
slider {
  flex: 1;
  margin-left: 15rpx;
}


</style>